<template>
	<div class="AdministrativeList">
		<el-row class="line">
			<el-col :span="6">
				<!-- :current-node-key="data.administrativeCode" -->
				<el-card>
					<el-tree highlight-current @node-click="handleNodeClick" :data="data" ref="tagtree" :props="defaultProps">
						<span class="custom-tree-node" slot-scope="{ node,data }">
                            <span :style="{background:data.color,color:'#fff',padding:'3px 5px',margin:'8px 0'}">{{ node.label }}</span>
                        </span>
					</el-tree>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card>
					<el-form :inline="false" ref="form" :rules="rules" :model="areaModel"  label-width="80px"
							 class="demo-form-inline">
						<el-form-item label="类别编号" prop="landTypeCode">
							<el-input v-model="areaModel.landTypeCode" minlength="6" maxlength="12" :disabled="disableduserLevel" 
									  show-word-limit placeholder="请输入内容"></el-input>
						</el-form-item>
						<el-form-item label="类别名称" prop="landTypeName">
							<el-input v-model="areaModel.landTypeName" minlength="2" maxlength="20"
									  show-word-limit placeholder="请输入内容"></el-input>
						</el-form-item>

						<el-form-item v-if="areaModel.landTypeParentCode!=0" label="所属父级" prop="landTypeParentCode">
							<el-input v-model="areaModel.landTypeParentCode" minlength="2" maxlength="20" disabled></el-input>
						</el-form-item>

						<el-form-item label="类别等级" prop="landTypeLevel">
							<el-input :disabled="true" v-model="areaModel.landTypeLevel" style="width:100%">
							</el-input>
						</el-form-item>
<!-- :disabled="disableduserLevel" -->
						<el-form-item label="类别颜色"  prop="color" >
							<el-color-picker style="float:left"  v-model="areaModel.color"></el-color-picker> 
							<el-tag style="float:left;margin:4px 0 0 5px">{{areaModel.color}}</el-tag>
						</el-form-item>

						<el-form-item >
							<el-button style="float:left" type="primary" :disabled="disableButton01" v-if="typeof tempData.id ==='number' " @click="showOther('form')">新增下级类别
							</el-button>
							<el-button style="float:left" type="primary" @click="edit('form')">保存</el-button>
							<el-button style="float:left" v-if="typeof tempData.id ==='number' && userInfo.userLevel === 3" type="info" @click="del('form')">删除</el-button>
						</el-form-item>

					</el-form>

				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
import axios from "@/api/request.js";
import {
    mapState
} from "vuex";
export default {
	name: "AdministrativeList",
	data() {
		return {
			disableduserLevel:false,
			nodeClick: {},
			administrativeHigh: "",
			disableButton01: false,
			modify: 0,
			data: [],
			defaultProps: {
				children: "children",
				//label: "label",
				label: 'landTypeName',
				id: 'landTypeCode',
				parentId: 'landTypeParentCode',
				isLeaf: false
			},
			isAddOrigan: false,
			addOrganizationForm: {},
			areaModel: {
				landTypeCode: "",
				landTypeName: "",
				landTypeParentCode: 0,
				landTypeLevel:1,
				color:"",
				systemType:""
			},
			tableData2: [],

			OrganizationTree: [],
			search: {
				planName: "",
				planStatus: [
					{
						value: 0,
						label: "全部",
					},
					{
						value: 1,
						label: "未发布",
					},
					{
						value: 2,
						label: "已发布",
					},
					{
						value: 3,
						label: "已撤回",
					},
					{
						value: 4,
						label: "已启用",
					},
					{
						value: 5,
						label: "已停用",
					},
				],
				value: "",
			},
			params: {
				pageNumber: 1,
				pageSize: 10,
			},
			paging: {},
			tableData: [],
			rules: {
				landTypeCode: [{
					required: true,
					message: '类别编号不能为空',
					trigger: 'blur'
				}
				],
				landTypeName: [{
					required: true,
					message: '类别名称不能为空',
					trigger: 'blur'
				},
					{
						min: 2,
						max: 20,
						message: '类别名称不能为空，长度在 2 到 20 个字符',
						trigger: 'blur'
					}
				]
			},
			tempData: {}
		};
	},
	computed: {
		        ...mapState({
            taskObject: (state) => {
                return state.taskmodel.taskObject;
            },
            currentTask: (state) => {
                return state.currentTask.Task;
            },
            userInfo: (state) => {
                return state.User.userInfo;
            },
        }),
		// treeItem() {
		// 	let administrative
		// 	if (localStorage.getItem('treeItem')) {
		// 		administrative = JSON.parse(localStorage.getItem('treeItem'))
		// 	} else {
		// 		administrative = this.tableData
		// 	}
		// 	return administrative
		// }
	},
	created() {
		this.getAdministrativeList();
	},
	mounted() {
		//this.treeLoad();
	},
	methods: {
		handleNodeClick(data, e) {
			this.disableduserLevel = true
			console.log(data);
			console.log(e.parent.data);
			this.tempData = data

			// this.areaModel.id = data.id;
			this.areaModel.color = data.color;
			this.areaModel.landTypeCode = data.landTypeCode;
			this.areaModel.landTypeName = data.landTypeName;
			if (data.landTypeParentCode !== 0) {
				this.areaModel.landTypeParentCode = e.parent.data.landTypeName;
			} else {
				this.areaModel.landTypeParentCode = ''
			}
			this.areaModel.landTypeLevel = data.landTypeLevel;
			//是否能创建子区域 3、4可以 5不可以
			if (this.areaModel.landTypeLevel == 5) {
				this.disableButton01 = true;
			} else {
				this.disableButton01 = false;
			}

			//修改状态
			this.modify = 1;
		},
		// filterNode(value, data) {
		// 	if (!value) return true;
		// 	return data.label.indexOf(value) !== -1;
		// },

		statusChange(item) {
			console.log(item);
		},
		planStatusCn(index) {
			var planStatus = {
				1: "未发布",
				2: "已发布",
				3: "已撤回",
				4: "已启用",
				5: "已停用",
			};

			return planStatus[index];
		},
		// load(tree, treeNode, resolve) {
		// 	setTimeout(() => {
		// 		resolve([{
		// 			id: 31,
		// 			date: '2016-05-01',
		// 			name: '王小虎',
		// 			address: '上海市普陀区金沙江路 1519 弄'
		// 		}, {
		// 			id: 32,
		// 			date: '2016-05-01',
		// 			name: '王小虎',
		// 			address: '上海市普陀区金沙江路 1519 弄'
		// 		}])
		// 	}, 1000)
		// },
		// handleSizeChange(pageSize) {
		// 	this.params.pageSize = pageSize;
		// 	this.getAdministrativeList(this.params.pageNumber, this.params.pageSize);
		// },
		// currentchange(pageNumber) {
		// 	this.params.pageNumber = pageNumber;
		// 	this.getAdministrativeList(this.params.pageNumber, this.params.pageSize);
		// },
		getAdministrativeList(pageNumber = 1, pageSize = 100) {
			this.$axios.get('/baseinfo/api/v1.0/fishing/landType/selectAll', {
				params: {
					pageNumber,
					pageSize
				}
			}).then((res) => {
				this.data = res.data.list
				console.log(res)
			})
			// this.$common.getAdministrativeList(pageNumber, pageSize).then((res) => {
			// 	this.tableData = res.data.treeItem;
			// 	localStorage.setItem('treeItem', JSON.stringify(this.tableData))
			//
			// });
		},
		showOther() {
			//新增状
			this.disableduserLevel = false
			this.disableButton01 = true
			this.areaModel.landTypeName = this.tempData.landTypeName;
			this.areaModel.landTypeLevel = this.areaModel.landTypeLevel + 1;

			this.$set(this.areaModel,'landTypeParentCode',this.tempData.landTypeName)
			this.tempData.landTypeParentCode = this.tempData.landTypeCode
			this.areaModel.landTypeCode = "";
			this.areaModel.landTypeName = "";
			this.modify = 0;

		},
		edit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {

					let jsonData = {
						landTypeCode: this.areaModel.landTypeCode,
						landTypeName: this.areaModel.landTypeName,
						landTypeParentCode: (typeof this.tempData.landTypeParentCode == 'undefined') ? 0 : this.tempData.landTypeParentCode,
						landTypeLevel: this.areaModel.landTypeLevel == '' ? 1 : this.areaModel.landTypeLevel,
						color:this.areaModel.color,
						// systemType:localStorage.getItem('SYS_TYPE')
					}
					//新增或修改 新节点
					if (this.modify == 0) {
						//新增
						axios.post(
								`/baseinfo/api/v1.0/fishing/landType/add`, {
									params: jsonData
								}).then((response) => {
							if (response.errorCode === '00000') {
								this.$message.success('保存成功')
							} else {
								this.$message.error(response.errorMsg)
							}
							this.areaModel.landTypeCode = "";
							this.areaModel.landTypeName = "";
							//局部更新
							// this.refreshNodeBy(this.nodeClick.parent);
							this.getAdministrativeList()
						});
					} else {
						jsonData.id = this.tempData.id;
						//修改
						axios.post(
								`/baseinfo/api/v1.0/fishing/landType/edit`, {
									params: jsonData
								}).then((response) => {
							console.log(response)
							//该行政编码已经存在
							if (response.errorCode == '00000') {
								this.$message.success("修改成功");
							} else {
								this.$message.success(response.errorMsg);
							}

							//局部更新
							// this.refreshNodeBy(this.nodeClick.parent);
							this.getAdministrativeList()
						});
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		},
		refreshNodeBy(id) {
			let node = this.$refs.tagtree.getNode(id); // 通过节点id找到对应树节点对象
			//
			node.loaded = false;
			node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
		},
		del() {
			//选中后，删除节点
			this.$confirm('是否删除?,如果删除可能造成GIS控制台无法匹配相关地块数据', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let id = this.tempData.id
				axios.get(`/baseinfo/api/v1.0/fishing/landType/delete/${id}`).then((response) => {
					console.log(response)
					if (response.errorCode === '00000') {
						this.$message.success('删除成功');
						this.areaModel.landTypeCode = "";
						this.areaModel.landTypeName = "";
						//局部更新
						// this.refreshNodeBy(this.nodeClick.parent);
						this.getAdministrativeList()
					} else {
						this.$message.error(response.errorMsg);
					}

				});
			}).catch(() => {
			});

		},

	},
};
</script>

<style lang="scss">
.AdministrativeList {
	.form {
		padding: 15px 10px;
	}

	.el-card {
		width: 98%;
		margin: 0 auto;

		.bottom {
			display: flex;
			justify-content: flex-end;
			margin-top: 15px;
		}
	}

	.line {
		margin-top: 15px;
	}
}
</style>
  